<template>
	<view class="case-manage">
		<view class="case-manage-tabs">
			<tabs :list="tabs" v-model="active" @input="select"></tabs>
		</view>
		<scroll-view :class="['case-manage-view']" scroll-y @scrolltolower="loadMore">
			<view class="case-manage-list" v-if="caseList.length">
				<view class="case-manage-item" v-for="(data,index) in caseList" :key="index" @click="add(data.case_id)">
					<image :src="data.image" mode="aspectFit"></image>
					<view class="case-manage-item-info">
						<view class="case-manage-item-tit">{{data.case_name}}</view>
						<view class="case-manage-item-style">{{data.style_name}}</view>
						<view class="case-manage-item-tag">
							<text>人气：{{data.click_mun}}</text>
							<text>收藏：{{data.case_collect_num}}</text>
						</view>
					</view>
				</view>
			</view>
			<nothing :text="'还未添加案例'" :btnTxt="'去添加'" @goUrl="add" v-else></nothing>
			<no-more :text="'数据加载完毕'" v-if="caseList.length && noMore"></no-more>
		</scroll-view>
		<view class="case-manage-bottom">
			<view @click="goCustomeStyle()">风格管理</view>
			<view @click="add()">添加案例</view>
			<view @click="batchManage()" v-if="caseList.length">批量管理</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				isRefresh: false,
				caseList: [],
				tabs: [],
				style_id: '',// 是否为某个分类下的案例
				defaultID: '',
				page: 0,
				noMore: false
			};
		},
		onLoad(options) {
			if(options.style_id){
				this.style_id = options.style_id
				uni.setNavigationBarTitle({
					title: '案例管理'
				})
			}
		},
		onShow() {
			this.caseList = []
			this.tabs = []
			let data = {
				order_by: 'add_time',
				asc: 1,
				page: 0,
				limit: 10,
				store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id
			}
			this.$api.CaseList(data).then(res => {
				res.datas.style_list.forEach((item,index) => {
					this.tabs.push({
						style_id: item.style_id,
						title: item.style_name
					})
				})
				// this.tabs.unshift({
				// 	style_id: '',
				// 	title: '全部'
				// })
				this.init(0,this.tabs[this.active].style_id)
			})
		},
		methods: {
			loadMore(){
				if(!this.noMore){
					this.page++
					this.init(this.page,this.tabs[this.active].style_id)
				}
			},
			select(e){
				this.caseList = []
				this.style_id = this.tabs[e].style_id
				this.init(0,this.tabs[e].style_id)
			},
			init(page,style_id){
				let data = {
					order_by: 'add_time',
					asc: 1,
					page: page?page:0,
					limit: 10,
					style_id: style_id,
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id
				}
				this.$api.CaseList(data).then(res => {
					if(res.datas.list){
						if(res.datas.list.length){
							res.datas.list.forEach(item => {
								this.caseList.push(item)
							})
						}
					}else{
						this.noMore = true
					}
				})
			},
			goCaseCategory(){
				uni.navigateTo({
					url: '/pages/case-manage/case-category-self'
				})
			},
			batchManage(){
				if(this.style_id){
					uni.navigateTo({
						url: '/pages/case-manage/batch-manage?style_id='+this.style_id
					})
				}else{
					uni.navigateTo({
						url: '/pages/case-manage/batch-manage'
					})
				}
			},
			add(id){
				if(this.style_id){
					if(id){
						uni.navigateTo({
							url: '/pages/case-manage/add-case?style_id='+this.style_id + '&case_id='+id
						})
					}else{
						uni.navigateTo({
							url: '/pages/case-manage/add-case?style_id='+this.style_id
						})
					}
				}else{
					if(id){
						uni.navigateTo({
							url: '/pages/case-manage/add-case?case_id='+id
						})
					}else{
						uni.navigateTo({
							url: '/pages/case-manage/add-case'
						})
					}
				}
			},
			goCustomeStyle(){
				uni.navigateTo({
					url: '/pages/custom-style/custom-style'
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '../../static/scss/case-manage.scss'
</style>